<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pl15 pr15 pb15">
					<view class="mt20 area_block_1">

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备名称</view>
								<view class="item tar"><input type="text" class="ipt_01" placeholder="请输入设备名称"
										v-model="name" placeholder-style="color:#B2B2B2;"></view>
								<image src="/static/icon_arrow_4.png" class="vh ml20 img15"></image>
							</view>
						</view>


						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备型号</view>
								<view class="item tar"><input type="text" class="ipt_01" placeholder="请输入设备型号"
										v-model="model" placeholder-style="color:#B2B2B2;"></view>
								<image src="/static/icon_arrow_4.png" class="vh ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备类型</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChange" :value="index" :range="types"
											range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorOne }">{{types[index].name}}</text>
										</picker>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备品牌</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChangeTwo" :value="indexTwo" :range="brands"
											range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorTwo }">{{brands[indexTwo].name}}</text>
										</picker>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备吨位</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChangeThree" :value="indexThree"
											:range="weights" range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorThree }">{{weights[indexThree].name}}</text>
										</picker>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>
						
						<view class="pt15 pb15 pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w170 fs30 cor_000">设备停放地</view>
								<view class="item">
									<view class="sel_area_sty">
										<view class="" @click="getSSQData();">{{address}}</view>
										<u-select v-model="show" mode="mutil-column-auto" :list="cityTree" @confirm="confirm"></u-select>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>
						
						
						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">出厂年份</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker mode=date @change="bindPickerDate" :value="date" fields="year">
											<text class="fz30" :class="{ cor_B2B : dateColor }">{{date}}</text>
										</picker>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">表显小时数</view>
								<view class="item tar"><input type="number" v-model="hours" class="ipt_01"
										placeholder="请输入整数" placeholder-style="color:#B2B2B2;"></view>
								<view class="ml35 fs28 cor_000">小时</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15 vh"></image>
							</view>
						</view>

						<view class="pl20 pr25">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">联系电话</view>
								<view class="item tar"><input type="number" v-model="phone" class="ipt_01"
										placeholder="请输入联系电话" placeholder-style="color:#B2B2B2;"></view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15 vh"></image>
							</view>
						</view>

					</view>

					<view class="mt20 area_block_1">
						<view class="pl20 pr25">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">意向售价</view>
								<view class="item tar"><input type="digit" v-model="price" class="ipt_01"
										placeholder="请输入" placeholder-style="color:#B2B2B2;"></view>
								<view class="ml35 fs28 cor_000">万元</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15 vh"></image>
							</view>
						</view>
					</view>

					<view class="mt15 df jcfe">
						<image src="/static/icon_07.png" class="img5"></image>
						<view class="ml10 fs24 cor_F23">不含平台费用，由管家与您核实售价</view>
					</view>

					<view class="mt20 pt35 pl20 pr20 pb30 area_block_1">
						<view class="fs30 cor_000">设备简介</view>
						<view class="mt20 textarea_area_line">
							<textarea class="textarea_01" @input="introduceChange" @blur="introduceConfirm"
								@confirm="introduceConfirm" placeholder="描述您设备的简单介绍，方便大家更直观的了解！"
								placeholder-style="color: #B2B2B2" :value="introduce"></textarea>
							<view class="mt15 fs22 cor_B2B"><text>{{intro_lenght}}</text>/150字</view>
						</view>
					</view>

					<view class="mt20 pt35 pl20 pr20 pb30 area_block_1">
						<view class="fs30 cor_000">设备图片</view>
						<view class="mt35 df fw">
							<view class="re img16 mr15 mb25" v-for="item, index in files"  :key="index" >
								<image class="mr17 mb10 img16" :src="item" style="border: 1px solid silver;border-radius: 20rpx;"></image>
								<image src="../../static/del.png" style="width: 40rpx;height: 40rpx;position: absolute;right: -12rpx;top:-24rpx;" @tap="delImg(index)"></image>
							</view>
							
							<image @tap="uploadFile" src="/static/icon_file_img.png" class="mb10 img16"></image>
						</view>
					</view>
<!-- 
					<view class="mt20 mb50 fs24 tar cor_ED3">{{reservationService}}</view> -->

				</view>
			</view>
			<!-- 上传设备图片-按钮 -->
			<view class="consult_immediately_btn" @tap="updateSellDiggerDigger">提交设备信息</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getMainFilterApi,
		updateSellDiggerApi,
		getCityTreeApi,
		uploadImgApi,
		myInfoDetailApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				id: '',
				types: [{
					id: 0,
					name: '请选择设备类型'
				}],
				typeId: 0,
				index: 0,
				ColorOne: true,
				brands: [{
					id: 0,
					name: '请选择设备品牌'
				}],
				brandId: 0,
				indexTwo: 0,
				ColorTwo: true,
				weights: [{
					id: 0,
					name: '请选择设备吨位'
				}],
				weightId: 0,
				indexThree: 0,
				ColorThree: true,
				region: ['请选择所在省市区', '', ''],
				region_code: [0, 0, 0],
				regionColor: true,
				date: '请选择年份',
				dateColor: true,
				reservationService: '不方便上传？请点击此处预约管家卖车服务<<', //预约管家服务
				model: '',
				hours: '',
				name: '',
				cityId: 0,
				introduce: '',
				intro_lenght: 0,
				pYear: '',
				phone: '',
				price: 0,
				files: [],
				localfiles: [],
				cityTree: [],
				sheng_index: 0,
				cityText: '',
				show: false,
				address: '获取省市区数据'
			}
		},
		onLoad(options) {
			let that = this;
			this.id = options.id;
			this.getMainFilter();
			setTimeout(function() {
				that.getCityTree();
			}, 2000)
			
		},
		methods: {
			getSSQData: function() {
			  this.show = true
			},
			
			confirm: function(e) {
				this.cityId = e[2].value;
				this.address = e[0].label + e[1].label + e[2].label;
			},
			
			getMainFilter() {
				let that = this;
				showLoading('加载中');
				getMainFilterApi({
					
				}).then(res => {
					that.types = res.data.types;
					that.weights = res.data.weights;
					that.brands = res.data.brands;
					
					myInfoDetailApi({
						id: that.id
					}).then(res => {
						that.typeId = res.data.typeId;
						that.weightId = res.data.weightId;
						that.brandId = res.data.brandId;
						that.cityId = res.data.cityId;
						that.hours = res.data.hours;
						that.id = res.data.id;
						that.imgList = res.data.imgList;
						that.introduce = res.data.introduce;
						that.model = res.data.model;
						that.name = res.data.name;
						that.pYear = res.data.pYear;
						that.phone = res.data.phone;
						that.price = res.data.price;
						that.intro_lenght = res.data.introduce.length;
						that.date = res.data.pYear;
						that.files = res.data.imgList;
						for (let i in that.weights) {
							if (that.weights[i].id == res.data.weightId) {
								that.indexThree = i
							}
						}
						for (let j in that.brands) {
							if (that.brands[j].id == res.data.brandId) {
								that.indexTwo = j
							}
						}
						for (let k in that.types) {
							if (that.types[k].id == res.data.typeId) {
								that.index = k
							}
						}
						
						hideLoading();
					}).catch(err => {
						hideLoading();
					})
					
				}).catch(err => {
					hideLoading();
				})
			},
			getCityTree() {
				let that = this;
				getCityTreeApi({
			
				}).then(res => {
					this.cityTree = res.data;
					for (let i in this.cityTree) {
						if ((this.cityTree[i].value + '').substring(0, 2) == (this.cityId + '').substring(0, 2)) {
							console.log('aaaa，找到你了');
							for (let j in this.cityTree[i].children) {
								for (let k in this.cityTree[i].children[j].children) {
									if (this.cityTree[i].children[j].children[k].value == this.cityId) {
										this.address = this.cityTree[i].label + this.cityTree[i].children[j].label + this.cityTree[i].children[j].children[k].label
										break;
									}
								}
							}
						}
						
					}
				}).catch(err => {
			
				})
			},
			
			bindPickerChange: function(e) { //请选择设备类型
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorOne = false
				} else {
					this.ColorOne = true
				}
				this.index = e.target.value;
				for (let i in this.types) {
					this.typeId = this.types[i].id;
				}
			},
			bindPickerChangeTwo: function(e) { //请选择设备品牌
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorTwo = false
				} else {
					this.ColorTwo = true
				}
				this.indexTwo = e.target.value;
				for (let i in this.types) {
					this.brandId = this.brands[i].id;
				}
			},
			bindPickerChangeThree: function(e) { //请选择设备吨位
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorThree = false
				} else {
					this.ColorThree = true
				}
				this.indexThree = e.target.value;
				for (let i in this.weights) {
					this.weightId = this.weights[i].id;
				}
			},

			bindPickerDate: function(e) { //注册日期
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.dateColor = false
				} else {
					this.dateColor = true
				}
				this.pYear = e.target.value;
				this.date = e.target.value;
			},
			introduceChange(e) {
				console.log(e.detail.value);
				this.intro_lenght = e.detail.value.length;
				if (this.intro_lenght > 150) {
					toast('工作介绍长度不得超过150个字符');
					return false;
				}
			},
			introduceConfirm(e) {
				this.introduce = e.detail.value;
				if (this.introduce.length > 150) {
					toast('工作介绍长度不得超过150个字符');
					return false;
				}
			},
			
			updateSellDiggerDigger() {
				
				let typeId = this.types[this.index].id;
				let brandId = this.brands[this.indexTwo].id;
				let weightId = this.weights[this.indexThree].id;
				if (!this.cityId) {
					toast('请选择挖机所在地！');
					return false;
				}
				if (!this.name) {
					toast('请填写设备名称');
					return false;
				}
				if (!this.model) {
					toast('请填写设备型号');
					return false;
				}
				if (!this.hours) {
					toast('请填写表显小时数');
					return false;
				}
				if (!this.pYear) {
					toast('请选择出厂年份');
					return false;
				}
				if (!this.phone) {
					toast('请填写手机号码');
					return false;
				}	
				if (!this.price) {
					toast('请输入意向价格');
					return false;
				}
				if (!this.files.length) {
					toast('请上传图片');
					return false;
				}
			
				showLoading('提交中');
				updateSellDiggerApi({
					id: this.id,
					brandId: brandId,
					typeId: typeId,
					weightId: weightId,
					model: this.model,
					hours: this.hours,
					name: this.name,
					cityId: this.cityId,
					introduce: this.introduce,
					pYear: this.pYear,
					phone: this.phone,
					price: this.price,
					imgList: JSON.stringify(this.files),
					userId: uni.getStorageSync('userId')
				}).then(res => {
					toast('信息提交成功！');
					hideLoading();
					setTimeout(function(){
						uni.redirectTo({
							url: '/pages/car_sales_consultation/car_sales_consultation'
						})
					},2000)
				}).catch(err => {
					hideLoading();
				})
			},
			
			uploadFile() {
				let that = this;
				if (that.files.length >= 9) {
					toast('最多上传9张照片');
				}
				let count = 9 - that.files.length ;
				uni.chooseImage({
					count: count,
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						for (let i in res.tempFilePaths) {	
							if (that.files.length < 9) {
								that.localfiles.push(res.tempFilePaths[i])
								showLoading('上传中');
								uploadImgApi({
									file: res.tempFilePaths[i],
									id: 2
								}).then(res=>{
									that.files.push(res.data);
									hideLoading();
								}).catch(err=>{
									hideLoading();
								})
								
							}
						}
				    }
				});
				console.log(that.files);
			},
			
			
			delImg(index) {
				console.log(index);
				console.log('aaaaaaa');
				let that = this;
				let files = [];
				let localfiles = [];
				for (let i in that.files) {
					if (i != index) {
						files.push(that.files[i]);
					}
				}
				for (let i in that.localfiles) {
					if (i != index) {
						localfiles.push(that.localfiles[i]);
					}
				}
				that.files = files;
				that.localfiles = localfiles;
			}
			
			
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		height: 94rpx;
		line-height: 94rpx;
		text-align: right;
		padding: 0;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 94rpx;
		line-height: 94rpx;
		text-align: right;
		font-size: 28rpx;
		color: #0A0A0A;
		background: transparent;
	}

	.textarea_area_line {
		padding: 20rpx;
		border: 1px solid #e7e5e5;
	}

	.textarea_area_line .textarea_01 {
		display: inline-block;
		width: 100%;
		padding: 0rpx;
		height: 245rpx;
		line-height: 40rpx;
		text-align: left;
		padding: 0;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}
</style>